import {createCache} from "../../packages/utils/createCache";
import {computed, getComponentCls, reactive} from "plain-design-composition";

export const PageThemeUtils = (() => {

  const darkCache = createCache<boolean>(getComponentCls('@@PAGE_THEME_IS_DARK'));
  const primaryCache = createCache<string>(getComponentCls('@@PAGE_THEME_PRIMARY'));
  const shapeCache = createCache<boolean>(getComponentCls('@@PAGE_THEME_SHAPE'));
  const sizeCache = createCache<boolean>(getComponentCls('@@PAGE_THEME_SIZE'));
  const zoomCache = createCache<number | undefined>(getComponentCls('@@PAGE_THEME_ZOOM'));

  const state = reactive({
    dark: darkCache.get(),
    primaryKey: primaryCache.get(),
    square: shapeCache.get(),
    small: sizeCache.get(),
    zoom: zoomCache.get(),
  });

  const configuration = computed((): {
    dark: boolean,
    primary: string | undefined,
    shape: number | undefined,
    small: boolean,
  } => {
    return {
      dark: !!state.dark,
      primary: !state.primaryKey ? undefined : ThemePrimaryColors[state.primaryKey]?.primary,
      shape: state.square ? 0 : undefined,
      small: !!state.small,
    };
  });

  const toggle = (isDark?: boolean) => {
    state.dark = isDark == null ? !state.dark : isDark;
    darkCache.set(state.dark);
  };

  const primary = (val: string | null) => {
    state.primaryKey = val;
    primaryCache.set(val);
  };

  const shape = (flag: boolean) => {
    state.square = flag;
    shapeCache.set(flag);
  };

  const small = (flag: boolean) => {
    state.small = flag;
    sizeCache.set(flag);
  };

  const zoom = (val: number | null) => {
    state.zoom = val;
    zoomCache.set(val);
  };

  return {
    configuration,
    toggle,
    state,
    primary,
    shape,
    small,
    zoom,
  };
})();


export const ThemePrimaryColors: Record<string, { label: string, primary: string | undefined } | undefined> = {
  default: { label: '默认主题', primary: undefined, },
  dustRed: { label: '薄暮', primary: '#f5222d', },
  volcano: { label: '火山', primary: '#fa541c', },
  subset: { label: '日暮', primary: '#fa8c16', },
  gold: { label: '金盏花', primary: '#faad14', },
  sunrise: { label: '日出', primary: '#fadb14', },
  lime: { label: '青柠', primary: '#a0d911', },
  polar: { label: '极光绿', primary: '#52c41a', },
  cyan: { label: '明青', primary: '#13c2c2', },
  daybreak: { label: '拂晓蓝', primary: '#1677ff', },
  geek: { label: '极客蓝', primary: '#2f54eb', },
  purple: { label: '酱紫', primary: '#722ed1', },
  magenta: { label: '洋红', primary: '#eb2f96', },
};
